<template>
  <view>
    <view class="content">
      <view class="goods-left">
        <scroll-view style="height:100%" scroll-y="true" :scroll-with-animation="true"
                     :enable-back-to-top="true">
          <template v-if="restockStatus == 0">
            <view class="goods-group"  v-for="(item, index) in hierarchyInformation" :key="index" @click="clickLayer(index)">
              <text class="goods-group-border" v-if="index == hierarchyIndex"></text>
              <text class="goods-group-name"
                    :class="index == hierarchyIndex? 'color' :''">第{{numberToUpperCase(item.hierarchy)}}层</text>
            </view>
          </template>
          <template v-else>
            <view class="goods-group" >
              <text class="goods-group-border"></text>
              <text class="goods-group-name color">全部</text>
            </view>
          </template>

        </scroll-view>
      </view>
      <view class="goods-right">
        <view id="header" style="padding-top: 24rpx;">
          <view class="top-box">
            <u-button color="#C2C2C3" :disabled="restockStatus!=0" @click="clearTheGoods"
                      :customStyle="{width: '164rpx', height: '64rpx', borderRadius: '40rpx',color:'#000000CC'}"
                      type="primary" :plain="true" text="一键清货"></u-button>
            <u-button color="#C2C2C3" :disabled="restockStatus!=0" @click="restocking()"
                      :customStyle="{width: '164rpx', height: '64rpx', borderRadius: '40rpx',color:'#000000CC'}"
                      type="primary" :plain="true" text="一键补满"></u-button>
            <u-button color="#6072FF" v-if="restockStatus==0" @click="bulkReplenishment"
                      :customStyle="{width: '164rpx', height: '64rpx', borderRadius: '40rpx',color:'#fff',background:'#6072FF'}"
                      type="primary" :plain="true" text="批量操作">
            </u-button>
            <u-button color="#6072FF" v-else @click="bulkReplenishment"
                      :customStyle="{width: '164rpx', height: '64rpx', borderRadius: '40rpx',color:'#fff',background:'#6072FF'}"
                      type="primary" :plain="true" text="取消批量">
            </u-button>
          </view>
          <view style="padding: 30rpx 0;">
            <view class="goods-inventory">
              <view class="goods-inventory-box" >
                <text class="title" :class="vendingMachineInventory.scarceStock>0?'warning':''">
                  {{vendingMachineInventory.scarceStock?vendingMachineInventory.scarceStock:0}}件
                </text>
                <text class="name" :class="vendingMachineInventory.scarceStock>0?'warning':''">
                  缺货量
                </text>
              </view>
              <view class="goods-inventory-box">
                <text class="title">{{vendingMachineInventory.freightLaneCount?vendingMachineInventory.freightLaneCount:0}}条</text>
                <text class="name">货道总数</text>
              </view>
              <view class="goods-inventory-box">
                <text class="title">{{vendingMachineInventory.capacityCount?vendingMachineInventory.capacityCount:0}}件</text>
                <text class="name">库存总量</text>
              </view>
              <view class="goods-inventory-box">
                <text class="title">{{vendingMachineInventory.stockCount?vendingMachineInventory.stockCount:0}}件</text>
                <text class="name">现库存量</text>
              </view>
            </view>
          </view>
        </view>
        <scroll-view :style="{ height: height + 'px'}" scroll-y="true" :scroll-with-animation="true"
                     :enable-back-to-top="true" @scrolltolower="reachBottom">
          <view class="goods-box" v-for="(item,index) in freightLaneInformation" :key="index">
            <view class="serial-number">
              <text>{{item.hierarchy}}</text>
              <text>{{item.freightLane<10?'0'+item.freightLane:item.freightLane}}</text>
            </view>
            <view class="goods-information-box"  @click="freightLaneSelected(null,item,item.checked)">
              <view class="goods-img-box goods-selected" v-if="item.commodityId">
                <view class="box">
                  <u--image v-if="item.fileName != null && item.fileName != ''" :src="imgURL+item.fileName" width="130rpx" height="130rpx"></u--image>
                  <u--image v-else :src="staticFileUrl+'/image/common/default_goods_image.svg'"  width="130rpx" height="130rpx"></u--image>
                </view>
              </view>
              <view class="goods-img-box" v-else @click.stop="chooseGoods(index)">
                <view class="box" >
                  <u--image v-if="restockStatus!=1" :src="`${staticFileUrl}/image/restock/add-goods.png`" width="41rpx"
                            height="41rpx"></u--image>
                  <view class="goods-img-text">{{restockStatus!=1?'选择商品':'未绑定商品'}}</view>
                </view>
              </view>
              <view class="goods-information">
                <view class="title-box">
                  <view class="title">{{item.commodityName?item.commodityName:'未绑定'}}</view>
                  <u-checkbox-group @change="freightLaneSelected($event,item,item.checked)" v-if="restockStatus!=0">
                    <u-checkbox  :name="item.id" :checked="item.checked"></u-checkbox >
                  </u-checkbox-group>
                </view>
                <view v-if="item.barCode" class="subtitle size24-color29">{{item.barCode}}</view>
                <view class="inventory size24-color29">
                  <view class="inventory-text-box">
                    <text>容量</text>
                    <text>{{item.capacity?item.capacity:0}}</text>
                  </view>
                  <view class="inventory-text-box">
                    <text>库存</text>
                    <text>{{item.stock?item.stock:0}}</text>
                  </view>
                  <view class="inventory-text-box">
                    <text>成本</text>
                    <text>￥{{item.costPrice?item.costPrice:0}}</text>
                  </view>
                  <view class="inventory-text-box">
                    <text>售价</text>
                    <text>￥{{item.retailPrice?item.retailPrice:0}}</text>
                  </view>
                </view>
              </view>
            </view>

            <view class="top-box" v-if="restockStatus == 0">
              <u-button color="#C2C2C3" @click="changeThePrice(item,index)"
                        :customStyle="{width: '112rpx', height: '50rpx', borderRadius: '40rpx',color:'#000000CC'}"
                        type="primary" :plain="true" text="编辑"></u-button>
              <u-button color="#C2C2C3" @click="offTheShelvesOperation(item,index)"
                        :customStyle="{width: '112rpx', height: '50rpx', borderRadius: '40rpx',color:'#000000CC'}"
                        type="primary" :plain="true" text="下架"></u-button>
              <u-button color="#C2C2C3" @click="listTheGoods(item)"
                        :customStyle="{width: '112rpx', height: '50rpx', borderRadius: '40rpx',color:'#000000CC'}"
                        type="primary" :plain="true" text="清货"></u-button>
              <u-button color="#6072FF" @click="singleReplenishment(item)"
                        :customStyle="{width: '112rpx', height: '50rpx', borderRadius: '40rpx',color:'#fff',background:'#6072FF'}"
                        type="primary" :plain="true" text="补货"></u-button>
            </view>
          </view>
          <view class="space"></view>
        </scroll-view>
      </view>
      <!-- <u-empty text="暂无商品" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"
               v-else></u-empty> -->
    </view>
    <u-modal :show="restockShow" :title="restockStatus==0?'补货':'批量补货'" :showConfirmButton="false">
      <view class="restock-modal-box">
        <view class="restock-box">
          <view class="restock-name">
            货道号<text style="color:red;">{{batchOperation.allSelected?'(全部)':''}}</text>
          </view>
          <u--input :disabled="true" v-model="batchOperation.freightLaneSelected"></u--input>
        </view>
        <view class="restock-box">
          <view class="restock-name">库存容量</view>
          <u--input v-model="batchOperation.capacity" type="number"></u--input>
        </view>
        <view class="restock-box" style="width: 530rpx">
          <view class="restock-name">库存数</view>
          <u--input v-model="batchOperation.stock" type="number"></u--input>
          <u-button v-if="restockStatus==0" @click="fillItUp(batchOperation)"
                    :customStyle="{width: '135rpx', height: '78rpx', borderRadius: '80rpx',color: '#000000',background: 'rgb(242, 242, 242)',marginLeft:'39rpx'}"
                     text="补满"></u-button>
        </view>
        <u-button type="primary" @click="multiAisleFilling"
                  :customStyle="{width: '380rpx', height: '80rpx', borderRadius: '40rpx', marginTop:'20rpx'}"
                  text="确定"></u-button>
        <u-button type="default" :plain="true" :hairline="true" text="取消" :customStyle="cancelCustomStyle"
                  @click="cancelRestockShow"/>
      </view>
    </u-modal>
    <u-modal :show="changePriceShow" title="编辑" :showConfirmButton="false">
      <view class="restock-modal-box">
        <view class="restock-box">
          <view class="restock-name">
            货道号
          </view>
          <u--input :disabled="true" v-model="changeThePriceParams.freightLaneSelected"></u--input>
        </view>
        <view class="restock-box" style="width: 530rpx">
          <view class="restock-name">商品</view>
          <u--input v-model="changeThePriceParams.commodityName" :disabled="true" type="number"></u--input>
          <u-button @click="chooseGoods(freightLaneIndex)"
                    :customStyle="{width: '135rpx', height: '78rpx', borderRadius: '80rpx',color: '#000000',background: 'rgb(242, 242, 242)',marginLeft:'39rpx'}"
                    text="选择"></u-button>
        </view>
        <view class="restock-box" v-if="$u.test.isEmpty(changeThePriceParams.costPrice)">
          <view class="restock-name">成本价</view>
          <u--input  v-model="changeThePriceParams.displayCostPrice" @input="checkCostPrice" type="digit"></u--input>
        </view>
        <view class="restock-box">
          <view class="restock-name">售价</view>
          <u--input  v-model="changeThePriceParams.retailPrice"  @input="checkRetailPrice" type="digit"></u--input>
        </view>
        <view class="restock-box">
          <view class="restock-name">容量</view>
          <u--input  v-model="changeThePriceParams.capacity"   type="number"></u--input>
        </view>
        <view class="restock-box" style="width: 530rpx">
          <view class="restock-name">库存数</view>
          <u--input v-model="changeThePriceParams.stock" type="number"></u--input>
          <u-button @click="fillItUp(changeThePriceParams)"
                    :customStyle="{width: '135rpx', height: '78rpx', borderRadius: '80rpx',color: '#000000',background: 'rgb(242, 242, 242)',marginLeft:'39rpx'}"
                    text="补满"></u-button>
        </view>
        <u-button type="primary" @click="changeThePriceOK"
                  :customStyle="{width: '380rpx', height: '80rpx', borderRadius: '40rpx', marginTop:'20rpx'}"
                  text="确定"></u-button>
        <u-button type="default" :plain="true" :hairline="true" text="取消" :customStyle="cancelCustomStyle"
                  @click="changePriceShow=false"/>
      </view>
    </u-modal>
	
    <u-modal :show="tipsShow" :showConfirmButton="false">
      <view class="restock-modal-box">
        <u--image :src="`${staticFileUrl}/image/restock/warning.png`" width="60rpx" height="54rpx"></u--image>
        <view class="kindTips-hint">{{kindTips.hint}}</view>
        <view class="kindTips-content">{{kindTips.content}}</view>
        <u-button type="primary" @click="tipsOK"
                  :customStyle="{width: '380rpx', height: '80rpx', borderRadius: '40rpx', marginTop:'60rpx'}"
                  text="确定"></u-button>
        <u-button type="default" :plain="true" :hairline="true" text="取消" :customStyle="cancelCustomStyle"
                  @click="tipsShow=false"/>
      </view>
    </u-modal>
	<!--批量操作类型选择 -->
	<u-modal :show="bulkOperationShow" :showConfirmButton="false">
	  <view class="bulk-operation-modal-box">
	    <view class="bulk-operation-kindTips-hint">请选择批量类型</view>
		<view class="bulk-operation-kindTips-content">
			<u-radio-group
				v-model="radioTypeId"
				placement="column"
			  >
				<u-radio
				  :customStyle="{padding: '25rpx 0rpx'}"
				  v-for="(item, index) in radioList"
				  :key="index"
				  :label="item.name"
				  :name="item.id"
				  :labelSize='13'
				  @change="radioChange"
				  iconSize="16"
				>
				</u-radio>
			  </u-radio-group>
		 </view> 
		<view class="top-box">
			<u-button type="default" :plain="true" :hairline="true" text="关闭" 
						:customStyle="{width: '220rpx', height: '70rpx', borderRadius: '40rpx',border: '1rpx solid rgb(224, 224, 224)',}"
						@click="bulkReplenishment"/>
			<u-button type="primary" @click="bulkOperationType"
					  :customStyle="{width: '220rpx', height: '70rpx', borderRadius: '40rpx', marginLeft: '59rpx'}"
					  text="确定"></u-button>
		</view>

	  </view>
	</u-modal>
	
	
	<u-modal :show="bulkOperationModifyPriceShow" title="编辑" :showConfirmButton="false">
	  <view class="restock-modal-box">
		<view class="restock-box">
			<view class="restock-name">
		      货道号<text style="color:red;">{{batchOperation.allSelected?'(全部)':''}}</text>
		    </view>
		    <u--input :disabled="true" v-model="batchOperation.freightLaneSelected"></u--input>
		</view>
	    <view class="restock-box">
	      <view class="restock-name">成本价</view>
	      <u--input  v-model="batchOperation.costPrice" @input="checkCostPrice" type="digit"></u--input>
	    </view>
	    <view class="restock-box">
	      <view class="restock-name">售价</view>
	      <u--input  v-model="batchOperation.retailPrice"  @input="checkRetailPrice" type="digit"></u--input>
	    </view>
	    <u-button type="primary" @click="batchModifyCommodity"
                :customStyle="{width: '380rpx', height: '80rpx', borderRadius: '40rpx', marginTop:'20rpx'}"
                text="确定"></u-button>
	    <u-button type="default" :plain="true" :hairline="true" text="取消" :customStyle="cancelCustomStyle"
	              @click="bulkOperationModifyPriceShow=false"/>
	  </view>
	</u-modal>
	
	
	<u-popup :show="batchModifyProductsShow" mode="bottom" :customStyle="{padding: '10rpx'}" round="20rpx" :safeAreaInsetBottom="false"
	       @touchmove.stop.prevent="moveHandle" @close="close">
		<view class="restock-modal-box u-m-b-40">
			<view class="kindTips-hint">批量修改商品</view>
			<view class="kindTips-content">
				<u-form :model="batchOperation">
					<u-cell-group>
						<u-cell title="货道选择" :value="'已选' + (batchOperation.allSelected ? total : batchOperation.idList.length) + '条货道'" @click="selectFreightLane" :isLink="true" arrowDirection="right"
									 @cancel="" :border ="false"></u-cell>
									 
						<u-cell title="新商品选择" :value="batchOperation.commodityName" @click.stop="chooseGoods(null)" :isLink="true" arrowDirection="right"
										 @cancel="" :border ="false"></u-cell>
					</u-cell-group>
					
					<u-form-item label="新商品售价" label-width="220">
						 <u--input placeholder="请输入售价"  inputAlign="center"  v-model="batchOperation.retailPrice"  border="bottom" :customStyle="{'width': '120rpx','border-radius': '0rpx !important' }" clearable =true ></u--input>
						 <text class="u-m-l-10" slot="right">元/个</text>
					</u-form-item>
					
					<u-form-item label="每个货道上架库存" label-width="200">
						<u-number-box  inputAlign :size="40" v-model="batchOperation.stock" :min="0" :max="999" inputWidth="60"></u-number-box>
						<text  slot="right">个</text>
					</u-form-item>
					<u-form-item label="每个货道容量" label-width="200">
						<u-number-box inputAlign :size="40" v-model="batchOperation.capacity" :min="0" :max="999" inputWidth="60"></u-number-box>
						<text  slot="right">个</text>
					</u-form-item>
				</u-form>
			</view>
			<view class="">
				<u-button type="primary" @click="batchModifyCommodity"
                  :customStyle="{width: '320rpx', height: '70rpx', borderRadius: '40rpx', marginTop:'20rpx'}"
                  text="确定"></u-button>
			</view>		  
      </view>
	</u-popup>
	
    <view class="bottom-container" v-if="restockStatus==1">
      <view class="left-box" @click="allSelectedOperation">
        <u-checkbox-group >
          <u-checkbox :checked="batchOperation.allSelected" @change="allSelectedOperation">
          </u-checkbox>
        </u-checkbox-group>
        <text class="text">全选</text>
      </view>
      <view>
        <u-button type="primary" @click="confirmReplenishment()"
                  :customStyle="{width: '320rpx', height: '70rpx', borderRadius: '40rpx',marginRight:'60rpx'}"
                  :text="bulkOperationText"></u-button>
      </view>
    </view>
    <u-modal :show="cueForAisleOpeningShow" title="提示" content='当前设备所有货道为关闭状态,可前往货道管理开启'
             :showCancelButton="true" confirmText="前往" @confirm="goToTheAisle" @cancel="cancelReturn">

    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cueForAisleOpeningShow:false,
      cancelCustomStyle: {
        fontSize: '26rpx',
        color: '#6072FF',
        width: '380rpx',
        height: '80rpx',
        borderRadius: '40rpx',
        marginTop:'34rpx',
      },
      imgURL: this.$configPath.imgURL,
      staticFileUrl: this.$configPath.staticFileUrl,
      //提示对象
      kindTips: {
        hint: '清货提示',
        content: '是否一键清除售货机所有货道库存数？',
      },
      //编辑弹框是否显示
      changePriceShow: false,
      //补货弹框是否显示
      restockShow: false,
      //提示框确定状态 用于判断提示框确定触发的方法
      tipsStatus:-1,
      //提示弹框是否显示
      tipsShow: false,
      //补货状态0单个1批量
      restockStatus: 0,
	  // 批量操作选择弹窗
	  bulkOperationShow: false,
      //货道请求参数
      params: {
        totalPage:0,
        pageNum: 1,
        pageSize: 10,
        hierarchy:'',
        displayRackId:'',
        enabled:true
      },
      //批量补货请求参数
      batchOperation:{
        //选中的货道 仅为前端展示
        freightLaneSelected:'',
        //库存数
        stock:'',
        //库存容量
        capacity:'',
        //多选 选中的货道
        idList:[],
        //是否全部选中
        allSelected:false,
        //父展架ID
        displayRackId:'',
        deviceId:'',
		commodityName:'',
		commodityId:'',
		retailPrice :0,
		costPrice:0,
      },
      //编辑请求参数
      changeThePriceParams:{
        id:'',
        displayCostPrice:'',
        //成本价
        costPrice:'',
        //售价
        retailPrice:'',
        deviceId:'',
        hierarchy:'',
        freightLane:'',
        commodityId:'',
        stock:'',
        capacity:'',
        version:'',
        freightLaneSelected:'',
        commodityName:'',
      },
      status: 'loading',
      height: 0,
      //货道总数用于 判断是否选中了所有货道
      total:0,

      //选择的货道下标
      freightLaneIndex:'',
      //选择的层级下标
      hierarchyIndex:0,
      //商品信息
      commodity:null,
      //设备id
      deviceId:'',
      //层级信息
      hierarchyInformation:[],
      //货道信息
      freightLaneInformation:[],
      //售货机 缺货量、货道总数、库存总数、现库存量
      vendingMachineInventory:null,
      //货道
      displayRack:'',
	  radioList: [
	  	{name: '批量修改商品', id: 1},
      {name: '批量补货（修改库存、容量）', id: 0},
	  	{name: '批量修改零售价', id: 2},
	  ],
	  radioTypeId:1,
	  bulkOperationText : '确认批量补货',
	  bulkOperationModifyPriceShow:false,
	  batchModifyProductsShow: false,
	  form: {
	  	sendCoin: 1,
	  	remark: '',
	  	integral:0,
	  },
	 
    };
  },
  onReady() {
    this.getPomHeight();
  },
  // onShow(){
  //   if (this.deviceId) {
  //       this.freightLaneInformation=[];
  //       this.findVendingMachine();
  //   }
  // },
  onLoad(option) {
    if (option.id){
      this.deviceId=option.id;
      this.batchOperation.deviceId=option.id;
      this.findVendingMachine();
    }else{
      this.$helpers.toast('缺少参数:设备ID');
      return;
    }
    // 监听事件
    uni.$on('restock',(data)=>{
	    this.findCommodityById(data.commodityId)
    });
  },
  onUnload() {
    // 移除监听事件
    uni.$off('restock');
  },
  methods: {
    //售价 校验
    checkRetailPrice(e) {
      if (e == '.') {
        this.$helpers.toast('请输入以数字开头的售价');
        this.$nextTick(() => {
          this.changeThePriceParams.retailPrice = '';
        });
        return
      }
      if (e>9999){
          this.$nextTick(() => {
            this.changeThePriceParams.retailPrice = 9999;
          })
          return;
      }
      //正则表达试
      e = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || ''
      //重新赋值给input
      this.$nextTick(() => {
        this.changeThePriceParams.retailPrice = e
      })
    },
    //成本价 校验
    checkCostPrice(e) {
      if (e == '.') {
        this.$helpers.toast('请输入以数字开头的成本价');
        this.$nextTick(() => {
          this.changeThePriceParams.displayCostPrice = '';
        });
        return
      }
      if (e>9999){
        this.$nextTick(() => {
          this.changeThePriceParams.displayCostPrice = 9999;
        })
        return;
      }
      //正则表达试
      e = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || ''
      //重新赋值给input
      this.$nextTick(() => {
        this.changeThePriceParams.displayCostPrice = e
      })
    },
    //提示弹框确定事件
    tipsOK(){
      if (this.tipsStatus==4){
        this.oneClickClearance('',this.displayRack.id)
      }else if (this.tipsStatus==3){
        this.offTheShelves(this.displayRack)
      }else if (this.tipsStatus==2){
        this.fillItUpWithOneKey();
      }else if (this.tipsStatus==1){
        this.oneClickClearance(this.hierarchyInformation[0].displayRackId,'');
      }
    },
    //一键清货提示框
    clearTheGoods(){
      this.kindTips.hint='清货提示'
      this.kindTips.content='是否一键清除售货机所有货道库存数？'
      this.tipsStatus=1;
      this.tipsShow=true;
    },
    //一键补货提示框
    restocking(){
      this.kindTips.hint='补货提示'
      this.kindTips.content='是否一键补满售货机所有货道库存数？'
      this.tipsStatus=2;
      this.tipsShow=true;
    },
    //单货道清货
    listTheGoods(item){
      if (this.commodityBindingJudgment(item)){
        return;
      }
      this.kindTips.content='是否清除'+item.alias+'货道库存数？'
      this.tipsStatus=4;
      this.displayRack=item;
      this.tipsShow=true;
    },
    //编辑
    changeThePrice(item,index){
      if (this.commodityBindingJudgment(item)){
        return;
      }
      this.freightLaneIndex=index;
      this.changeThePriceParams.retailPrice=item.retailPrice;
      this.changeThePriceParams.costPrice=item.costPrice;
      this.changeThePriceParams.displayCostPrice=item.costPrice;
      this.changeThePriceParams.capacity=item.capacity;
      this.changeThePriceParams.stock=item.stock;
      this.changeThePriceParams.version=item.version;
      this.changeThePriceParams.id=item.id;
      this.changeThePriceParams.hierarchy=item.hierarchy;
      this.changeThePriceParams.freightLane=item.freightLane;
      this.changeThePriceParams.commodityName=item.commodityName;
      this.changeThePriceParams.commodityId=item.commodityId;
      this.displayRack=item;
      this.changeThePriceParams.freightLaneSelected=this.freightLaneSelectedSplicing(item.hierarchy,item.freightLane)
      this.changePriceShow=true;
    },
    //下架货道商品
    offTheShelvesOperation(item,index){
      if (this.commodityBindingJudgment(item)){
        return;
      }
      this.freightLaneIndex=index;
      this.displayRack=item;
      this.kindTips.hint='下架选中的商品'
      this.kindTips.content='下架后商品不可以前台继续售卖，是否继续？'
      this.tipsStatus=3;
      this.tipsShow=true;
    },
    //单货道补货
    singleReplenishment(item){
      if (this.commodityBindingJudgment(item)){
          return;
      }
      this.restockShow=true;
      this.restockStatus=0;
      this.batchOperation.idList=[];
      this.batchOperation.idList.push(item.id)
      this.batchOperation.stock='';
      this.batchOperation.capacity='';
      this.batchOperation.stock=item.stock;
      this.batchOperation.capacity=item.capacity;
      this.batchOperation.freightLaneSelected=this.freightLaneSelectedSplicing(item.hierarchy,item.freightLane)
    },
    freightLaneSelectedSplicing(hierarchy,freightLane){
      if (freightLane<10){
          return hierarchy+'0'+freightLane
      }
      return hierarchy+''+freightLane;

    },
    //商品绑定判断
    commodityBindingJudgment(item){
      if (uni.$u.test.isEmpty(item.commodityId)){
          this.$helpers.toast(item.alias+'货道未绑定商品!');
          return true;
      }
    },
    //取消补货
    cancelRestockShow(){
      if (this.restockStatus==0){
          this.batchOperation.freightLaneSelected='';
          this.batchOperation.idList=[];
      }
      this.restockShow=false;
    },
    //全选操作
    allSelectedOperation(){
      this.batchOperation.allSelected=!this.batchOperation.allSelected;
      this.batchOperation.freightLaneSelected='';
      this.batchOperation.idList=[];
      //true 选中全部货道
      if (this.batchOperation.allSelected){
        this.freightLaneInformation.forEach(item=>{
          this.$set(item,'checked',true)
          this.batchOperation.idList.push(item.id);
        })
      }else{
        this.freightLaneInformation.forEach(item=>{
          this.$set(item,'checked',false)
        })
      }
    },
    //确认补货
    confirmReplenishment(){
      if (uni.$u.test.isEmpty(this.batchOperation.idList)){
          this.$helpers.toast('请至少选中一项!');
          return;
      }
	  this.batchOperation.freightLaneSelected='';
	  this.batchOperation.idList.forEach(id=>{
	  	this.freightLaneInformation.forEach(item=>{
			if (item.id == id){
				this.batchOperation.freightLaneSelected=uni.$u.test.isEmpty(this.batchOperation.freightLaneSelected)?
				this.freightLaneSelectedSplicing(item.hierarchy,item.freightLane):this.batchOperation.freightLaneSelected+','+this.freightLaneSelectedSplicing(item.hierarchy,item.freightLane)
			}
		})
	  })
	  if(this.radioTypeId == 0){
		  this.batchOperation.stock='';
		  this.batchOperation.capacity='';
		  this.restockShow=true;

	  } else if(this.radioTypeId == 1){
		  this.restockStatus = 0;
		  this.batchModifyProductsShow =true;
	  }else{
		  this.bulkOperationModifyPriceShow = true;
	  }
    },
    //货道选中事件
    freightLaneSelected(e,item,checked){
      if (!uni.$u.test.isEmpty(e) || uni.$u.test.isEmpty(checked)){
        this.batchOperation.idList.push(item.id)
        this.$set(item,'checked',true)
      }else{
        this.batchOperation.idList=this.batchOperation.idList.filter(i => i != item.id)
        this.$set(item,'checked',false)
      }
      //选中的货道与当前所有货道长度对比/货道总数  相等全选状态true,否false
      this.batchOperation.allSelected=this.total==this.batchOperation.idList.length || this.batchOperation.idList.length==this.freightLaneInformation.length
    },
    //确定编辑
    changeThePriceOK(){
      if (uni.$u.test.isEmpty(this.changeThePriceParams.displayCostPrice)){
        this.$helpers.toast('请填写成本价!');
        return;
      }
      if (uni.$u.test.isEmpty(this.changeThePriceParams.retailPrice)){
        this.$helpers.toast('请填写售价!');
        return;
      }
      if (this.changeThePriceParams.retailPrice==0){
          this.$helpers.toast('售价不能等于0!');
          return;
      }
      if (this.changeThePriceParams.displayCostPrice==0){
          this.$helpers.toast('成本价不能等于0!');
          return;
      }
      if (Number(this.changeThePriceParams.displayCostPrice)>Number(this.changeThePriceParams.retailPrice)){
          this.$helpers.toast('成本价不能大于售价!');
          return;
      }
      this.changeThePriceParams.costPrice=this.changeThePriceParams.displayCostPrice;
      this.changeThePriceParams.deviceId=this.deviceId;
      // //绑定商品
      // this.updateByIdAndUserId(this.freightLaneInformation[this.freightLaneIndex].id,res.data.id,this.freightLaneInformation[this.freightLaneIndex].version)

      this.$api('displayRackItem.updatePrice',this.changeThePriceParams).then(res=>{
        if (res.status == 0){
          if(res.data>0){
            this.$helpers.toast('编辑成功!');
            this.changePriceShow=false;
            this.channelInformation();
            this.findInventoryByDisplayRackId();
          }else {
            this.$helpers.toast('编辑失败!');
          }
        }else{
          this.$helpers.toast('编辑异常:'+res.msg);
        }
      })
    },
    //获取商品信息
    findCommodityById(id){
      this.$api('commodity.findCommodityById',{'id':id}).then(res=>{
        if (res.status == 0){
		  if(this.freightLaneIndex !=null ){
        console.log(this.freightLaneIndex)
        console.log(this.freightLaneInformation)
			  this.commodity=res.data;
        this.changeThePriceParams.commodityId=this.commodity.id;
        this.changeThePriceParams.commodityName=this.commodity.name;
        this.changeThePriceParams.costPrice=res.data.costPrice;
        this.changeThePriceParams.displayCostPrice=res.data.costPrice;
        this.changeThePriceParams.retailPrice=res.data.retailPrice;
        this.changeThePriceParams.deviceId=this.deviceId;
        this.changeThePriceParams.hierarchy=this.freightLaneInformation[this.freightLaneIndex].hierarchy;
        this.changeThePriceParams.freightLane=this.freightLaneInformation[this.freightLaneIndex].freightLane;
        this.changeThePriceParams.capacity=this.freightLaneInformation[this.freightLaneIndex].capacity;
        this.changeThePriceParams.stock=0;
        this.changeThePriceParams.version=this.freightLaneInformation[this.freightLaneIndex].version;
        this.changeThePriceParams.id=this.freightLaneInformation[this.freightLaneIndex].id;
        this.changeThePriceParams.freightLaneSelected=this.freightLaneSelectedSplicing(this.changeThePriceParams.hierarchy, this.changeThePriceParams.freightLane)
        this.changePriceShow=true;
		  }else {
			  this.batchOperation.commodityName = res.data.name;
			  this.batchOperation.commodityId=res.data.id;
			  this.batchOperation.retailPrice=res.data.retailPrice
			  this.batchOperation.costPrice=res.data.costPrice
		  }
		}else{
          this.$helpers.toast('设备商品信息获取异常:'+res.msg);
        }
      })
    },
    //货道绑定商品
    updateByIdAndUserId(id,commodityId,version){
      let parameter={
        deviceId:this.deviceId,
        hierarchy:this.freightLaneInformation[this.freightLaneIndex].hierarchy,
        freightLane:this.freightLaneInformation[this.freightLaneIndex].freightLane,
        id:id,
        commodityId:commodityId,
        version:version
      }
      this.$api('displayRackItem.updateByIdAndUserId',parameter).then(res=>{
        if (res.status == 0){
            this.channelInformation();
            this.findInventoryByDisplayRackId();
        }else{
          this.$helpers.toast('设备货道信息获取异常:'+res.msg);
        }
      })
    },
    //下架货道商品
    offTheShelves(displayRack){
      let parameter={
        id:displayRack.id,
        version:displayRack.version,
        deviceId:this.deviceId,
        hierarchy:this.freightLaneInformation[this.freightLaneIndex].hierarchy,
        freightLane:this.freightLaneInformation[this.freightLaneIndex].freightLane,
      }
      this.$api('displayRackItem.offTheShelves',parameter).then(res=>{
        if (res.status == 0){
          if(res.data>0){
            this.$helpers.toast('下架成功!');
            this.tipsShow=false;
            this.channelInformation();
            this.findInventoryByDisplayRackId();
          }else {
            this.$helpers.toast('下架失败!');
          }
        }else{
          this.$helpers.toast('下架异常:'+res.msg);
        }
      })
    },
    cancelReturn(){
      uni.navigateBack({
        delta: 1,
      })
    },
    goToTheAisle(){
      uni.navigateTo({
        url: '/pages-vending-machine/channel-management/channel-management?id='+this.deviceId
      })
    },
    //获取设备层级信息
    findVendingMachine(){
      this.$api('displayRackItem.findVendingMachine',{'deviceId':this.deviceId}).then(res=>{
        if (res.status == 0){
          if (uni.$u.test.isEmpty(res.data)){
              this.cueForAisleOpeningShow=true;
          }else{
            this.cueForAisleOpeningShow=false;
            this.hierarchyInformation=res.data;
            this.findInventoryByDisplayRackId()
            this.params.displayRackId=this.hierarchyInformation[0].displayRackId;
            this.params.hierarchy=this.hierarchyInformation[0].hierarchy;
            this.findCommodityByHierarchy();
          }
        }else{
          this.$helpers.toast('设备层级信息获取异常:'+res.msg);
        }
      })
    },
    //获取货道信息
    findCommodityByHierarchy(){
      uni.showLoading({
        title: '加载中...',
        mask: true
      })
      this.$api('displayRackItem.findCommodityByHierarchy',this.params).then(res=>{
        uni.stopPullDownRefresh();
        if (res.status == 0){
          uni.hideLoading();
          this.params.pageNum = res.data.pageNum;
          this.params.totalPage = res.data.pages;
          this.total = res.data.total;
          this.status = res.data.list.length === 10 ? 'loadmore' : 'nomore';
          this.freightLaneInformation=[...this.freightLaneInformation,...res.data.list];
          if (this.params.pageNum >= res.data.pages) {
            this.loadStatus = 'nomore';
          }
          //batchOperation.allSelected=true全选 则为后分页查询的数据修改选中状态
          if (this.batchOperation.allSelected){
            res.data.list.forEach(item=>{
              this.$set(item,'checked',true)
              this.batchOperation.idList.push(item.id);
            })
          }
        }else{
          uni.hideLoading();
          this.$helpers.toast('设备货道信息获取异常:'+res.msg);
        }
      }).catch(err => {
        uni.hideLoading();
        uni.stopPullDownRefresh();
      })
    },
    //获取设备
    findInventoryByDisplayRackId(){
      this.$api('displayRackItem.findInventoryByDisplayRackId',{'displayRackId':this.hierarchyInformation[0].displayRackId}).then(res=>{
        if (res.status == 0){
          this.vendingMachineInventory=res.data;
        }else{
          this.$helpers.toast('设备信息获取异常:'+res.msg);
        }
      })
    },
    //单货道补满
    fillItUp(data){
      data.stock=data.capacity;
    },
    //多选补货
    multiAisleFilling(){
      if (uni.$u.test.isEmpty(this.batchOperation.stock)){
        this.batchOperation.stock=0;
      }
      if (uni.$u.test.isEmpty(this.batchOperation.capacity)){
        this.batchOperation.capacity=0;
      }
      if (Number(this.batchOperation.stock)>Number(this.batchOperation.capacity)){
          this.$helpers.toast('库存数不能大于库存容量!');
          return;
      }
      if (this.batchOperation.stock<0){
          this.$helpers.toast('库存数不能小于0!');
          return;
      }
      if (this.batchOperation.capacity<0){
          this.$helpers.toast('库存容量不能小于0!');
          return;
      }
      this.batchOperation.displayRackId=this.hierarchyInformation[0].displayRackId;
      this.$api('displayRackItem.multiAisleFilling',this.batchOperation).then(res=>{
        if (res.status == 0){
          this.$helpers.toast('补货成功!');
          this.batchOperation.idList=[];
          this.batchOperation.freightLaneSelected='';
          this.restockShow=false;
          this.restockStatus=0;
          this.channelInformation();
          this.findInventoryByDisplayRackId();
        }else{
          this.$helpers.toast('补货异常:'+res.msg);
        }
      })
    },
	// 批量修改商品和价格
	batchModifyCommodity(){
		if(this.radioTypeId == 0 || this.radioTypeId == 1){
      if (uni.$u.test.isEmpty(this.batchOperation.stock)){
        this.$helpers.toast('请填写库存数!');
        return;
      }
      if (uni.$u.test.isEmpty(this.batchOperation.capacity)){
        this.$helpers.toast('请填写库存容量!');
        return;
      }
			if (Number(this.batchOperation.stock)>Number(this.batchOperation.capacity)){
				this.$helpers.toast('库存数不能大于库存容量!');
				return;
			}
			if (this.batchOperation.stock<0){
				this.$helpers.toast('库存数不能小于0!');
				return;
			}
			if (this.batchOperation.capacity<0){
				this.$helpers.toast('库存容量不能小于0!');
				return;
			}
			if(uni.$u.test.isEmpty(this.batchOperation.commodityId)){
				this.$helpers.toast('请选择新的商品');
				return;
			}
		}
		if(this.radioTypeId == 1 || this.radioTypeId == 2){

			if (uni.$u.test.isEmpty(this.batchOperation.retailPrice) || this.batchOperation.retailPrice<0){
			  this.$helpers.toast('售价不能为空或者小于或等于0!');
			  return;
			}
			if (Number(this.batchOperation.costPrice)>Number(this.batchOperation.retailPrice)){
				this.$helpers.toast('成本价不能大于售价!');
				return;
			}

		}
		this.batchOperation.batchModifyType = this.radioTypeId;
		this.batchOperation.displayRackId=this.hierarchyInformation[0].displayRackId;
		console.log(this.batchOperation)
		this.$api('displayRackItem.batchModifyCommodity',this.batchOperation).then(res=>{
		  if (res.status == 0){
		    this.$helpers.toast('修改成功!');
			this.batchOperation.commodityName = '';
			this.batchOperation.commodityId='';
			this.batchOperation.retailPrice='';
			this.batchOperation.costPrice='';
		    this.restockShow=false;
		    this.restockStatus=0;
			this.batchModifyProductsShow = false;
			this.bulkOperationModifyPriceShow = false;
		    this.channelInformation();
		    this.findInventoryByDisplayRackId();
		  }else{
		    this.$helpers.toast('补货异常:'+res.msg);
		  }
		})
	},
	
	
	
	
	
    //清货
    oneClickClearance(displayRackId,id){
      this.$api('displayRackItem.oneClickClearance',{'displayRackId':displayRackId,'id':id}).then(res=>{
        if (res.status == 0){
          this.$helpers.toast('清货成功');
          this.tipsShow=false;
          this.channelInformation();
          this.findInventoryByDisplayRackId();
        }else{
          this.$helpers.toast('一键清货异常:'+res.msg);
        }
      })
    },
    //一键补货
    fillItUpWithOneKey(){
      this.$api('displayRackItem.fillItUpWithOneKey',{'displayRackId':this.hierarchyInformation[0].displayRackId}).then(res=>{
        if (res.status == 0){
          this.$helpers.toast('一键补货成功');
          this.tipsShow=false;
          this.channelInformation();
          this.findInventoryByDisplayRackId();
        }else{
          this.$helpers.toast('一键补货异常:'+res.msg);
        }
      })
    },
    //层级点击事件
    clickLayer(index) {
      this.hierarchyIndex = index;
      this.channelInformation()
    },
    //货道翻页
    reachBottom() {
      if (this.status == 'nomore') {
        return;
      }
      this.status = 'loading';
      this.params.pageNum++;
      this.findCommodityByHierarchy();
    },
    //跳转商品页
    chooseGoods(index){
      if (this.restockStatus==1){
        return
      }
	  this.freightLaneIndex=index;
      this.$u.route('/pages-commodity/goods-info', {
        from: 'restock',
        type:5,
		branchType:2,
      });
    },
    //刷新当前货道信息
    channelInformation(){
      this.params.enabled=true;
      this.params.totalPage=0;
      this.params.pageNum=1;
      this.batchOperation.idList=[];
      this.freightLaneInformation=[];
	    this.batchOperation.allSelected = false;
      this.params.displayRackId=this.hierarchyInformation[this.hierarchyIndex].displayRackId;
      this.params.hierarchy=this.hierarchyInformation[this.hierarchyIndex].hierarchy;
      this.findCommodityByHierarchy();
    },
    //批量补货操作
    bulkReplenishment() {
      if (this.bulkOperationShow == false && this.restockStatus == 0){
		    this.bulkOperationShow = true;
      }else{
        this.bulkOperationShow = false;
        this.restockStatus = 0;
        this.channelInformation()
      }
      this.batchOperation.freightLaneSelected = '';
      this.batchOperation.stock = '';
      this.batchOperation.capacity = '';
      this.batchOperation.idList = [];
      this.batchOperation.allSelected=false;
      this.batchOperation.displayRackId = '';
      this.batchOperation.commodityName = '';
      this.batchOperation.commodityId = '';
      this.batchOperation.retailPrice = 0;
      this.batchOperation.costPrice = 0;
    },
	
	bulkOperationType(){
		if(this.radioTypeId == 0){
			this.bulkOperationText = '确认批量补货';
      this.params.enabled='';
    }else if(this.radioTypeId == 1){
      this.bulkOperationText = '确认批量修改商品';
      this.params.enabled=true;
    }else{
			this.bulkOperationText = '确认批量修改零售价';
      this.params.enabled=true;
    }
		this.freightLaneInformation=[];
		this.restockStatus = 1;
		this.bulkOperationShow = false;
		//获取所有货道信息不分层级
		this.params.totalPage=0;
		this.params.pageNum=1;
		this.params.displayRackId=this.hierarchyInformation[this.hierarchyIndex].displayRackId;
		this.params.hierarchy='';
		this.findCommodityByHierarchy();
	},
	
	//进入选择货道
	selectFreightLane() {
		this.params.totalPage=0;
		this.params.pageNum=1;
    this.params.hierarchy='';
		this.batchOperation.idList=[];
		this.freightLaneInformation=[];
		this.batchOperation.allSelected = false;
		this.batchModifyProductsShow = false;
		this.restockStatus = 1;
		this.findCommodityByHierarchy();
		
	},
	
	close(){
		this.batchModifyProductsShow = false;
		this.channelInformation();
	},
	
	
	// 选择要批量处理的类型
	radioChange(e){
		this.radioTypeId = e;
	},
	
	
    //层级大写转换
    numberToUpperCase(num) {
      const upperCaseNumbers = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
      const upperCaseTens = ["", "十", "二十", "三十", "四十", "五十", "六十", "七十", "八十", "九十"];

      num = parseInt(num);

      if (isNaN(num)) {
        return "NaN";
      }

      if (num < 10) {
        return upperCaseNumbers[num];
      } else if (num < 20) {
        return upperCaseTens[1] + (num === 10 ? "" : upperCaseNumbers[num - 10]);
      } else {
        const units = num % 10;
        const tens = Math.floor(num / 10);
        return upperCaseTens[tens] + (units !== 0 ? upperCaseNumbers[units] : "");
      }
    },
    // 获取各个盒子的高度
    getPomHeight() {
      let query = wx.createSelectorQuery().in(this)
      query.select('#header').boundingClientRect()
      query.exec(res => {
        let windowHeight = wx.getSystemInfoSync().windowHeight
        this.height = windowHeight - 30
        for (let i = 0; i < res.length; i++) {
          this.height -= res[i].height;

        }
      })

    },
  }
};
</script>

<style lang="scss">
  /deep/ .u-popup__content{
    border-radius: 30rpx !important;
  }
page {
  background: rgb(255, 255, 255);
}
.warning{
  color: red !important;
}
.size24-color29 {
  font-size: 24rpx;
  color: #22222299;
}
///deep/ .u-button--active {
//  color: #ffffff !important;
//  background: rgb(96, 114, 255) !important;
//}
/deep/ .u-input {
  border-radius: 12px !important;
  width: 317rpx;
  height: 40rpx;
}

/deep/ .u-checkbox__icon-wrap {
  margin: 0 !important;
}

/deep/ .u-modal__content {
  padding: 40rpx 70rpx 30rpx 70rpx !important;
}
/deep/ .u-cell__body {
  padding: 20rpx 0rpx !important;;
}

.space{
  height: 40rpx;
}
.bottom-container {
  z-index: 999999;
  padding: 20rpx 0;
  background-color: #FFFFFF;
  padding-bottom: 40rpx;
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  bottom: 0px;

  .left-box {
    margin-left: 60rpx;
    display: flex;
    align-items: center;

    .text {
      margin-left: 20rpx;
      color: rgb(34, 34, 34);
      font-size: 32rpx;
    }
  }
}

.restock-modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

  .kindTips-hint {
    margin-top: 20rpx;
    color: rgb(34, 34, 34);
    font-size: 32rpx;
  }

  .kindTips-content {
    margin-top: 40rpx;
    color: rgba(34, 34, 34, 0.7);
    font-size: 28rpx;
  }

  .restock-cancel {
    margin-top: 32rpx;
    text-align: center;
    font-size: 28rpx;
    color: rgb(96, 114, 255);
  }

  .restock-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40rpx;

    .restock-name {
      color: rgb(34, 34, 34);
      font-size: 28rpx;
      width: 180rpx;
    }
  }

}


.bulk-operation-modal-box {
  display: flex;
  flex-direction: column;
  //
  width: 100%;

  .bulk-operation-kindTips-hint {
	text-align: center;
    margin-top: 20rpx;
    color: rgb(34, 34, 34);
    font-size: 32rpx;
  }

  .bulk-operation-kindTips-content {
    margin-top: 30rpx;
	margin-bottom: 30rpx;
    color: rgba(34, 34, 34, 0.7);
    font-size: 28rpx;
  }



}

.serial-number {
  position: relative;
  width: 50rpx;
  height: 50rpx;
  left: 0rpx;
  top: 130rpx;
  z-index: 999 !important;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  background: rgb(96, 114, 255);
  border-radius: 50%;
}

.top-box {
	margin-top: 25rpx;
    display: flex;
    justify-content: space-between;
}
.content {

  padding: 0 24rpx;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 4fr;

  .goods-right {


    .goods-box {
      margin-bottom: 50rpx;

      .goods-information-box {
        margin-top: -40rpx;
        display: flex;
        justify-content: space-between;
        .goods-selected {
          background-color: #FFFFFF !important;
          //border: 1rpx solid rgba(0, 0, 0, 0.2);
        }

        .goods-img-box {
          width: 160rpx;
          height: 160rpx;
          background: rgb(245, 246, 248);
          border-radius: 20px;
          display: flex;
          align-items: center;
          justify-content: center;


          .box {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            .goods-img-text {
              margin-top: 4rpx;
              color: rgba(0, 0, 0, 0.4);
              font-size: 24rpx;
            }
          }
        }

        .goods-information {
          //margin-left: 21rpx;
          width: 375rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .title-box {
            display: flex;
            justify-content: space-between;
          }

          .title {
            font-size: 32rpx;
            color: #222222;
          }

          .subtitle {
            margin-top: 12rpx;
          }

          .inventory {
            display: grid;
            grid-template-columns: 1fr 1fr;

            .inventory-text-box {
              width: 180rpx;
              margin-top: 3rpx;
            }
          }
        }
      }
    }

    .goods-inventory {
      display: flex;
      justify-content: space-between;
      background: rgb(245, 246, 248);
      border-radius: 16px;
      padding: 27rpx 24rpx 25rpx;

      .goods-inventory-box {
        display: flex;
        flex-wrap: wrap;

        justify-content: center;

        .name {
          height: auto;
          width: auto;
          font-size: 24rpx;
          color: rgba(0, 0, 0, 0.6);
        }

        .title {
          height: auto;
          width: auto;
          font-size: 32rpx;
          color: rgb(0, 0, 0);
        }
      }
    }
  }

  .goods-left {
    .goods-group {
      font-size: 32rpx;
      padding: 37rpx 0;
    }

    .goods-group-border {
      border-left: 10rpx solid rgb(96, 114, 255);
      border-radius: 20%;
      color: rgb(96, 114, 255);
    }

    .goods-group-name {
      padding-left: 8rpx;
    }

    .color {
      color: rgb(96, 114, 255);
    }
  }

}
</style>
